<template>
    <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel :size="'80%'" style="height: 900px; padding: 10px;">
                <div class="demo-panel">
                    <el-row :gutter="24">
                        <el-col :span="24" style="border-bottom: 1px black solid; padding-bottom: 10px;">
                            <el-button size="default" @click="printPage" plain><el-icon>
                                    <Printer />
                                </el-icon>打印</el-button>

                            <el-button size="default" @click="Delete" plain><el-icon>
                                    <CopyDocument />
                                </el-icon>删除1</el-button>

                        </el-col>


                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="简历信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="简历编号" label-position="top">
                                    <el-input
                                        :model-value="interviewData[0]?.interviewrecord[0]?.candidateresume?.candidateid"
                                        style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="所属需求编号" label-position="top">
                                    <el-input
                                        :model-value="interviewData[0]?.interviewrecord[0]?.candidateresume?.resumeRequirements"
                                        style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="姓名" label-position="top">
                                    <el-input
                                        :model-value="interviewData[0]?.interviewrecord[0]?.candidateresume?.candidatename"
                                        style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="手机号" label-position="top">
                                    <el-input
                                        :model-value="interviewData[0]?.interviewrecord[0]?.candidateresume?.cellPhone"
                                        style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="招聘负责人" label-position="top">
                                    <el-button size="small" style="width: 260px;" ref="buttonRef"
                                        v-click-outside="onClickOutside"><el-icon>
                                            <UserFilled />
                                        </el-icon>{{ interviewData[0]?.interviewrecord[0]?.candidateresume?.screenpeople
                                        }}</el-button>
                                    <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="早濑优香"
                                        virtual-triggering>
                                        <hr>
                                        <span> 部门：人事部 </span><br>
                                        <span> 手机:1008611 </span>
                                    </el-popover>

                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light">
                                <el-table :data="ResumeInformation" border
                                    :default-sort="{ prop: 'WarehousingDate', order: 'descending' }"
                                    style="width: 1400px;">

                                    <el-table-column prop="interviewrecord[0].candidateresume.candidateid" label="简历编号"
                                        width="160px" />
                                    <el-table-column prop="interviewrecord[0].candidateresume.filterDate" sortable
                                        label="入库时间" width="160px" />
                                    <el-table-column v-for="col in ResumeInformationData" :prop="col.id" :key="col.id"
                                        :label="col.label" :width="col.width">
                                        <template #default="scope">
                                            <template v-if="col.id === 'interviewrecord[0].candidateresume.gender'">
                                                <span
                                                    v-if="scope.row.interviewrecord?.candidateresume?.gender === 1">女</span>
                                                <span v-else>男</span>
                                            </template>

                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="发起时间" label-position="top">
                                    <el-input :model-value="interviewData[0]?.theplanbegins" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="面试阶段" label-position="top">
                                    <el-input :model-value="getLastInterviewRoundLabel()" style="width: 260px;"
                                        disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="一面" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <template v-for="(interviewerItem, index) in interviewer.interviewinterviewers"
                            :key="interviewerItem.interviewRound || index">
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple">
                                    <el-form-item
                                        :label="`${numberToChinese(interviewerItem.interviewRound || (index + 1))}面面试官`"
                                        label-position="top">
                                        <el-button size="small" style="width: 260px;"
                                            :ref="el => { if (el) interviewButtons[index] = el }"
                                            v-click-outside="() => hidePopover(index)">
                                            <el-icon>
                                                <UserFilled />
                                            </el-icon>
                                            {{ interviewerItem.employee?.employeeName || '未指定' }}
                                        </el-button>
                                        <el-popover trigger="click"
                                            :title="`${numberToChinese(interviewerItem.interviewRound || (index + 1))}面面试官`"
                                            virtual-triggering :ref="el => { if (el) interviewPopovers[index] = el }"
                                            :virtual-ref="interviewButtons[index]">
                                            <hr>
                                            <span> 部门：{{ interviewerItem.employee?.department?.deptName || '未知' }}
                                            </span><br>
                                            <span> 手机: {{ interviewerItem.employee?.emergencyContactsPhone || '未知' }}
                                            </span>
                                        </el-popover>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="grid-content ep-bg-purple">
                                    <el-form-item
                                        :label="`${numberToChinese(interviewerItem.interviewRound || (index + 1))}面是否通过`"
                                        label-position="top">
                                        <!-- 使用throughLoading中的数据来显示面试结果 -->
                                        <el-input
                                            :model-value="getInterviewResultByRound(throughLoading.interviewrecord, interviewerItem.interviewRound || (index + 1))"
                                            style="width: 260px;" disabled />
                                    </el-form-item>
                                </div>
                            </el-col>
                            <!--  -->
                            <el-col :span="24">
                                <div class="grid-content ep-bg-purple-light">
                                    <el-form-item
                                        :label="`${numberToChinese(interviewerItem.interviewRound || (index + 1))}面评价`"
                                        label-position="top">
                                        <!-- 使用throughLoading中的数据来显示面试评价 -->
                                        <el-input clearable style="width: 560px" type="textarea"
                                            :autosize="{ minRows: 5, maxRows: 8 }" :model-value="throughLoading.interviewrecord && throughLoading.interviewrecord.length > index
                                                ? (throughLoading.interviewrecord[index]?.interviewContent || '暂无评价')
                                                : '暂无评价'" disabled />
                                    </el-form-item>
                                </div>
                            </el-col>
                        </template>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="招聘负责人审批" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="简历状态" label-position="top">
                                    <el-input placeholder="待面试" style="width: 260px;" disabled />
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->

                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">早濑优香</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">2025年7月4日16:00:45</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-splitter-panel>
            <!--  -->
            <el-splitter-panel :max="260">
                <div class="demo-panel" style="padding: 6px;">
                    <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                        <el-tab-pane label="数据日志" name="first">
                            <div class="card-container">
                                <el-card style="width: 250px;margin-bottom: 5zpx;" v-for="item in operationDataContent">
                                    <el-row :gutter="24">
                                        <el-col :span="12" style="padding: 5px;">操作人：</el-col>
                                        <el-col :span="12" style="font-size: 10px ; padding: 5px;">2025-07-09
                                            09:45</el-col>
                                        <el-col :span="12"
                                            style="font-size: 12px ; padding: 5px; color:rgb(102, 177, 255)">{{
                                                item.employee.employeeName }}</el-col>
                                        <el-col :span="12"
                                            style="font-size: 12px ; padding: 5px; color:rgb(102, 177, 255)">{{
                                                item.operationType }}1</el-col>
                                    </el-row>

                                </el-card>

                                <el-card style="width: 250px; margin-bottom: 10px;"
                                    v-if="(currentInterviewData && currentInterviewData.length > 0 && currentInterviewData[0].employee) || (personInCharge && personInCharge.length > 0)">
                                    <el-row :gutter="24">
                                        <el-col :span="12">当前负责人：</el-col>
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12" style="color: rgb(102, 177, 255);">{{
                                            currentInterviewData[0]?.employee?.employeeName ||
                                            personInCharge[0]?.demandsubmitter ||
                                            '暂无负责人'
                                            }}</el-col>
                                        <el-col :span="24">&nbsp;</el-col>
                                        <el-col :span="24"><a-button style="width: 210px;" type="outline"
                                                status="success" @click="Approval">前往处理</a-button></el-col>

                                    </el-row>

                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="second">
                            <div ref="commentContainerRef" style="height: 800px;overflow: auto;">
                                <div style="position: relative;height: 800px"
                                    v-if="!commentDataContent || commentDataContent.length === 0">
                                    <!-- 父级设置相对定位 -->
                                    <a-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                                </div>
                                <a-comment v-for="item in commentDataContent" :author="item.employee.employeeName"
                                    avatar="https://images.unsplash.com/photo-1747767763480-a5b4c7a82aef?q=80&w=2704&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    :content="item.content" :datetime="item.createdAt"
                                    style="border: 1px solid #eee; border-radius: 10px; padding: 2px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); max-width: 300px;">
                                    <template #actions>
                                        <span class="action" key="heart" @click="onLikeChange(item)">
                                            <span v-if="item.userLiked">
                                                <IconHeartFill :style="{ color: '#f53f3f' }" />
                                            </span>
                                            <span v-else>
                                                <IconHeart />
                                            </span>
                                            {{ item.commentandlike }}
                                        </span>
                                    </template>
                                </a-comment>
                            </div>
                            <div style="display: flex; justify-content: center; width: 100%;">
                                <el-input placeholder="留下你的精彩评论吧(Enter：发送)" clearable v-model="content"
                                    style="width: 250px; font-size: 12px;" @keyup.enter="sendComment" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <el-dialog title="zp0001" v-model="ApprovalModificationDisplay" fullscreen destroy-on-close>
        <hr />
        <ApprovalAndModification :data="interviewNumber"></ApprovalAndModification>

    </el-dialog>



</template>
<script setup lang="ts">
import request from '@/api/request'
import { ref, unref, onMounted, defineProps, nextTick } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ClickOutside as vClickOutside } from 'element-plus'
import ApprovalAndModification from '@/views/recruitment/InterviewFollowUp/ApprovalAndModification.vue'
const interviewNumber = ref() //面试编号
// 方法1: 使用带有类型定义的defineProps
const props = defineProps({
    data: {
        type: [String, Number],
        required: true
    }
})


const idAsInt1 = parseInt(props.data.toString(), 10)


console.log("id获取数据为", props.data);
console.log("id转为整数:", idAsInt1);

const buttonRef = ref()
const popoverRef = ref()
const DefaultDataComments = ref('first')//数据评论默认值 
const TalentModificationDisplay = ref(false)//修改弹窗显示
const ApprovalModificationDisplay = ref(false) //审批弹窗显示
const comments = ref([]) // 添加评论数据变量

// 面试官按钮和弹出框引用数组
const interviewButtons = ref([])
const interviewPopovers = ref([])

const interviewData = ref([])
const interviewer = ref({
    interviewinterviewers: []
}) // 面试官数据

const throughLoading = ref({
    interviewrecord: []
})
const personInCharge = ref([])// 负责人数据
const obtainInterviewData = () => {
    request({
        url: '/interviewschedule/selectInterviewDetailById',
        method: 'get',
        params: { interviewNumber: idAsInt1 }
    }).then(res => {

        interviewData.value = res.data
        ResumeInformation.value = interviewData.value
        interviewNumber.value = res.data[0].interviewNumber
        console.log("获取面试数据成功", res);
        resumeNumber.value = res.data[0].interviewrecord[0].candidateresume.resumeRequirements
        request({
            url: '/recruitmentrequirement/selectByRequirementIdAndRecruiterId',
            method: 'get',
            params: {
                requirementid: resumeNumber.value
            }
        }).then(res => {

            personInCharge.value = res.data
            console.log("获取负责人", personInCharge.value);
        })
        // 将res.data中的interviewinterviewers数据传递给interviewer变量
        if (res.data && res.data.length > 0 && res.data[0].interviewinterviewers) {
            interviewer.value = {
                ...interviewer.value,
                interviewinterviewers: res.data[0].interviewinterviewers
            }
            // 添加调试信息，查看面试官数据结构
            console.log("面试官数据结构:", res.data[0].interviewinterviewers);
            res.data[0].interviewinterviewers.forEach((item, index) => {
                console.log(`面试官${index + 1}:`, item);
            });
        }

        // 将面试记录数据存储到throughLoading变量中
        if (res.data && res.data.length > 0 && res.data[0].interviewrecord) {
            throughLoading.value = {
                ...throughLoading.value,
                interviewrecord: res.data[0].interviewrecord
            }
            console.log("面试记录数据:", throughLoading.value.interviewrecord);
        }

        console.log("面试官数据", interviewer.value.interviewinterviewers);
    })
}
obtainInterviewData()

const currentInterviewData = ref({
    employee: {
        employeeName: ''
    },
}) //当前面试数据
const resumeNumber = ref()//简历编号
// 获取当前面试数据
const currentInterview = () => {
    request({
        url: '/interviewschedule/selectInterviewScheduleWithInterviewerAndEmployee',
        method: 'get',
        params: { interviewNumber: idAsInt1 }
    }).then(res => {
        console.log("res", res.data);
        currentInterviewData.value = res.data
        console.log("获取面试人数据成功", currentInterviewData.value);
        operationData()

    })
}
currentInterview()
const Approval = () => { //审批
    console.log("点击了审批", interviewNumber.value);
    ApprovalModificationDisplay.value = true
}
//打印
const printPage = () => {
    window.print()
}
const update = () => {
    TalentModificationDisplay.value = true;
    console.log('点击了编辑');
}
const Delete = () => {
    ElMessageBox.confirm(
        '你确定要删除所选数据吗？',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })

        })
}
// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}

// 隐藏面试官弹出框
const hidePopover = (index) => {
    if (interviewPopovers.value[index]) {
        interviewPopovers.value[index].popperRef?.delayHide?.()
    }
}

const DataComment = (tab: TabsPaneContext, event: Event) => {
    //点击评论时触发commentData（）
    if (tab.paneName === "second") {
        commentData()
    }
    console.log(tab, event)
}


const ResumeInformation = ref([

]) //简历信息数据
const ResumeInformationData = ref([
    { id: "interviewrecord[0].candidateresume.intendedPosition", label: '意向岗位', width: '160' },
    { id: "interviewrecord[0].candidateresume.typeofjobapplication", label: '应聘类型', width: '160' },
    { id: "interviewrecord[0].candidateresume.candidatename", label: '姓名', width: '160' },
    { id: "interviewrecord[0].candidateresume.gender", label: '性别', width: '160' },
    { id: "interviewrecord[0].candidateresume.cellPhone", label: '手机号', width: '160' },
    { id: "interviewrecord[0].candidateresume.dateOfBirth", label: '出生年月', width: '160' },
    { id: "interviewrecord[0].candidateresume.age", label: '年龄', width: '160' },
    { id: "interviewrecord[0].candidateresume.degree", label: '学历', width: '160' },
    { id: "interviewrecord[0].candidateresume.specialized", label: '专业', width: '160' },
    { id: "interviewrecord[0].candidateresume.graduationTime", label: '毕业时间', width: '160' },
    { id: "interviewrecord[0].candidateresume.school", label: '毕业院校', width: '160' },
    { id: "interviewrecord[0].candidateresume.marriageAndChildbearing", label: '婚育情况', width: '160' },
    { id: "interviewrecord[0].candidateresume.lastWork", label: '工作经历', width: '160' },
    { id: "interviewrecord[0].candidateresume.resumeStatus", label: '简历状态', width: '160' },
])//简历信息   

const a = ref()
const b = ref()

const InterviewerButton = () => {
    unref(a).a?.b?.()
}

// 添加获取嵌套值的函数
const getNestedValue = (obj, path) => {
    return path.split('.').reduce((current, prop) => {
        return current?.[prop];
    }, obj);
};

// 添加数字转汉字的函数
const numberToChinese = (num) => {
    const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    const units = ['', '十', '百', '千'];
    const bigUnits = ['', '万', '亿'];

    if (num === 0) return chineseNumbers[0];
    if (!num || num < 0) return '';

    // 简单处理1-99的情况，足够面试轮次使用
    if (num < 10) return chineseNumbers[num];
    if (num < 20) return '十' + (num % 10 ? chineseNumbers[num % 10] : '');
    if (num < 100) {
        const tens = Math.floor(num / 10);
        const remainder = num % 10;
        return chineseNumbers[tens] + '十' + (remainder ? chineseNumbers[remainder] : '');
    }

    return num.toString(); // 超出范围返回原数字
};

// 获取session中的用户信息 - 需要解析JSON字符串
let user = JSON.parse(sessionStorage.getItem('user') || '{}');
console.log("当前用户编号", user.employeeId);
const currentProcessing = () => {
    request({
        url: '',
        method: 'get',
        params: {
            employeeId: user.employeeId
        }
    })
}



// 在组件挂载时调用一次
onMounted(() => {
    pingLun()
})

const commentData = () => { //评论数据方法
    console.log("offerid", 91827505);

    request({
        url: '/comments/queryCommentsWithTheBoundID',
        method: 'get',
        params: {
            boundId: props.data
        }
    }).then(res => {
        console.log(res.data);
        commentDataContent.value = res.data
        console.log('commentDataContent', commentDataContent.value);

        // 数据加载完成后滚动到底部
        scrollToBottom()
    })
}

// 滚动到底部的方法
const scrollToBottom = () => {
    nextTick(() => {
        if (commentContainerRef.value) {
            commentContainerRef.value.scrollTop = commentContainerRef.value.scrollHeight
        }
    })
}

const commentDataContent = ref([]) //评论数据
const commentContainerRef = ref(null) // 评论容器引用
const like = ref(false);//点赞
// 修改点赞功能实现
const onLikeChange = (comment) => {
    console.log(comment);

    // 检查用户是否已经登录
    if (!user || !user.employeeId) {
        ElMessage.warning("请先登录后再点赞")
        return
    }

    if (!comment.userLiked) {
        request({
            url: "/comments/updateCommentAndLikeById",
            method: 'post',
            data: {
                commentId: comment.commentId,

            }
        }).then(res => {

            // 更新点赞状态和点赞数
            comment.userLiked = !comment.userLiked
            comment.commentandlike += 1


        }).catch(err => {
            console.error("点赞操作出错:", err)
            ElMessage.error("操作失败，请稍后重试")
        })

    } else {
        comment.commentandlike = Math.max(0, comment.commentandlike - 1)
        request({
            url: "/comments/updateCommentAndLikeByIdj",
            method: 'post',
            data: {
                commentId: comment.commentId,

            }
        }).then(res => {

            // 更新点赞状态和点赞数
            comment.userLiked = !comment.userLiked


        }).catch(err => {
            console.error("点赞操作出错:", err)
            ElMessage.error("操作失败，请稍后重试")
        })
    }
    ElMessage.success(comment.userLiked ? "点赞成功" : "取消点赞成功")
    // 发送点赞请求到后端

};

const operationDataContent = ref([]) //操作数据内容
const operationData = () => { //操作数据方法
    console.log("面", interviewNumber.value);

    request({
        url: '/dataoperationrecordsheet/getById',
        method: 'get',
        params: { operationTargetId: interviewNumber.value }
    }).then(res => {
        console.log("操作数据", res.data);
        operationDataContent.value = res.data //操作数据内容

    })
}




const content = ref('') //评论内容
const data = ref();

const sendComment = () => {  //发送评论
    data.value = {
        content: content.value,
        commentUserId: user.employeeId,
        targetId: interviewNumber.value
    }
    request({
        url: "/comments/insert",
        method: 'post',
        data: data.value
    }).then(res => {
        console.log(res.data);
        ElMessage.success("发送成功")
        content.value = ''
        commentData()
        scrollToBottom() // 发送成功后滚动到底部
    })
}

const pingLun = () => {
    request({
        url: '/comments/findUserById',
        method: 'get',
        params: {
            commentId: 12300301
        }

    }).then(res => {
        console.log(res.data)
        comments.value = res.data
    })
}

// 在组件挂载时调用一次
onMounted(() => {
    pingLun()
})

// 根据numberOfInterviews获取最后一次面试记录
const getLastInterviewRecord = (interviewRecords, interviewRound) => {
    // 过滤出当前面试轮次的所有记录
    // 处理 numberOfInterviews 可能为 null 的情况，通过数组索引推断轮次
    const recordsForRound = interviewRecords.filter((record, index) => {
        if (record.numberOfInterviews !== null) {
            return record.numberOfInterviews === interviewRound
        } else {
            // 如果 numberOfInterviews 为 null，使用数组索引+1作为轮次
            return (index + 1) === interviewRound
        }
    });

    // 如果有记录，返回最新的记录（根据interviewRecordId判断）
    if (recordsForRound.length > 0) {
        return recordsForRound.reduce((latest, current) =>
            current.interviewRecordId > latest.interviewRecordId ? current : latest
        );
    }

    // 如果没有记录，返回null
    return null;
};

// 根据面试轮次获取面试结果
const getInterviewResultByRound = (interviewRecords, interviewRound) => {
    if (!interviewRecords) {
        return '进行中';
    }
    const lastRecord = getLastInterviewRecord(interviewRecords, interviewRound);
    console.log("lastRecord", lastRecord);

    if (!lastRecord) {
        return '待面试';
    }

    // 根据面试结果值显示对应中文
    const result = lastRecord.interviewResults;
    if (result === '通过' || result === 'pass') {
        return '通过';
    } else if (result === '不通过' || result === 'fail') {
        return '不通过';
    }

    // 处理其他可能的结果值
    if (result) {
        return result;
    }

    return '待面试';
};

// 根据面试轮次获取面试评价
const getInterviewCommentByRound = (interviewRecords, interviewRound) => {
    const lastRecord = getLastInterviewRecord(interviewRecords, interviewRound);
    return lastRecord ? lastRecord.interviewContent : '暂无评价';
};

// 获取最后面试轮次的标签
const getLastInterviewRoundLabel = () => {
    const records = throughLoading.value.interviewrecord;
    if (!records || records.length === 0) {
        return '初审';
    }

    // 获取最大的面试轮次
    const maxRound = Math.max(...records.map(record => record.numberOfInterviews));

    // 根据轮次返回对应标签
    switch (maxRound) {
        case 1: return '初审';
        case 2: return '复审';
        case 3: return '终审';
        default: return '初审';
    }
};

</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>